<template>
	<view>
		<view class="search-box" v-if="!url">
			<view class="search-item" :style="'border-radius:' + searchStyleObj[searchStyle]">
				<image class="icon-sm" src="/static/images/icon/search.png"></image>
				<input @confirm="confirm" @input="setValue" class="ml-md flex-1" confirmType="search" :placeholder="placeholder"
				 placeholderClass="placeholder" type="text" :value="keyword"></input>
				<image @tap="clear" class="icon-md" src="/static/images/icon/del-fill.png" v-if="keyword"></image>
			</view>
		</view>
		<view @tap="goUrl" class="search-box" :data-url="url" v-if="url">
			<view class="search-item" :style="'border-radius:' + searchStyleObj[searchStyle] + ';justify-content:' + textAlign">
				<image class="icon-sm" src="/static/images/icon/search.png"></image>
				<view class="ml-md c-caption">搜索</view>
				<image @tap="clear" class="icon-md" src="/static/images/icon/del-fill.png" v-if="keyword"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				searchStyleObj: {
					square: "0rpx",
					radius: "12rpx",
					circle: "32rpx"
				}
			};
		},

		components: {},
		props: {
			placeholder: {
				type: String,
				default: "搜索"
			},
			searchStyle: {
				type: String,
				default: "radius"
			},
			textAlign: {
				type: String,
				default: "flex-start"
			},
			url: {
				type: String,
				default: ""
			},
		},
		methods: {
			setValue: function(t) {
				var e = t.detail.value;
				this.$emit("setValue", {
					detail: e
				});
			},
			clear: function() {
				this.setData({
					keyword: ""
				});
			},
			confirm: function(t) {
				var e = this.keyword;
				this.$emit("confirm", {
					detail: e
				});
			},
			back: function() {
				uni.navigateBack({
					delta: 1
				});
			},
			goUrl: function() {
				var t = this.url;
				uni.navigateTo({
					url: t
				});
			}
		}
	};
</script>
<style>
	.search-box {
		padding: 16rpx 32rpx;
		display: flex;
		align-items: center;
		background: #fff;
	}

	.search-item {
		flex: 1;
		height: 72rpx;
		background: #efeff5;
		border-radius: 16rpx;
		padding: 0 16rpx 0 35rpx;
		display: flex;
		align-items: center;
		line-height: 1;
		font-size: 28rpx;
		color: #888;
	}

	.placeholder {
		font-size: 28rpx;
	}

	.search-item-btn {
		color: #19a918;
		margin-left: 32rpx;
		font-size: 30rpx;
	}

	.search-btn {
		padding: 0 20rpx 0 40rpx;
	}

	.icon-sm {
		width: 30rpx;
		height: 30rpx;
	}

	.flex-1 {
		flex: 1;
	}

	.icon-md {
		width: 40rpx;
		height: 40rpx;
	}

	.ml-md {
		margin-left: 16rpx;
	}
</style>
